<script setup lang="ts">
import { initProject } from '@/cesium-api/project-api'
import {
  onGridLayerColorChange,
  onGridLayerFilter,
  onVolumeLayerColorChange,
  onVolumeLayerFilter,
  onWindLayerColorChange,
  onWindLayerFilter,
  viewModel_GridColorAndValueRamp,
  viewModel_IsoSurfaceColorAndValueRamp,
  viewModel_VolumeColorAndValueRamp,
  viewModel_WindColorAndValueRamp,
} from '@/view-model/legend'
import { We_getInstance } from '@/we-api/we-env'

import { getImageryProviderViewModels, getTerrainProviderViewModels } from '@/cesium-api/map-config'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { We_getLowerCaseFileExtension, WeDebuggerPrimitive } from '@/we-api/we-utils'
import { loadDrapLayer } from '@/cesium-api/layer-api'
import { We_showTimeHead } from '@/we-api/we-components/TimeHead'
import { We_showPositionInfo } from '@/we-api/we-components/PositionInfo'
import { We_enableSlide, We_enableEdit } from '@/we-api/we-components/ColorCard'
import { WePointTooltipContent } from '@/we-api/we-components/Tooltip/PointTooltip'
import { WeTiltTooltipContent } from '@/we-api/we-components/Tooltip/TiltTooltip'
import { WeElTooltipContent } from '@/we-api/we-components/Tooltip/WeElTootip'
import { We_showEcharts } from '@/we-api/we-components/WeEcharts'

const cesiumOptions = {
  imageryProviderViewModels: getImageryProviderViewModels(),
  terrainProviderViewModels: getTerrainProviderViewModels(),
  scene3DOnly: false,
  defaultImagery: 0,
  vrButton: false,
  fullscreenButton: true,
  // sceneMode: Cesium.SceneMode.SCENE2D,
  // mapMode2D: Cesium.MapMode2D.ROTATE,
  projectionPicker: true,
  // contextOptions: {
  //   webgl: {
  //     alpha: true,
  //     depth: true,
  //     stencil: true,
  //     antialias: true,
  //     premultipliedAlpha: true,
  //     preserveDrawingBuffer: true,
  //     failIfMajorPerformanceCaveat: true,
  //     xrCompatible: false,
  //   },
  // },
}

const handleDragOver = (event) => {
  event.preventDefault()
}
const handleDrop = (event) => {
  event.preventDefault()
  if (!event.dataTransfer) return
  if (!event.dataTransfer.files) return
  const files: any = []
  for (let i = 0; i < event.dataTransfer.files.length; i++) {
    files.push(event.dataTransfer.files[i].path)
  }
  if (files.length === 0) return
  const file = files[0]
  const ext = We_getLowerCaseFileExtension(file)

  if (files.length === 1) {
    loadDrapLayer(file)
  } else {
    if (ext === 'awx') {
      const filterFiles = files.filter((e) => e.toLowerCase().endsWith(ext)).sort()
      if (filterFiles.length === 0) return
      loadDrapLayer(filterFiles)
    }
  }
}
onMounted(() => {
  const WE = We_getInstance()
  if (!WE) return
  initProject(WE)

  // if (!import.meta.env.DEV) {
  //   WE.primitiveManager.add(new WeDebuggerPrimitive())
  // }
  window.addEventListener('dragover', handleDragOver)
  window.addEventListener('drop', handleDrop)
})
onBeforeUnmount(() => {
  window.removeEventListener('dragover', handleDragOver)
  window.removeEventListener('drop', handleDrop)
})
</script>

<template>
  <div class="cesium-map">
    <cesium-map :cesium-options="cesiumOptions" />
  </div>
  <div class="dat-gui">
    <dat-gui />
  </div>
  <div>
    <PointTooltip v-for="item in WePointTooltipContent" :id="item.id" :key="item.id" />
    <TiltTooltip v-for="item in WeTiltTooltipContent" :id="item.id" :key="item.id" />
    <WeElTootip v-for="item in WeElTooltipContent" :id="item.id" :key="item.id" />
    <WeEcharts v-if="We_showEcharts" class="wecharts"></WeEcharts>
  </div>
  <div v-if="We_showPositionInfo" class="position-info-wrapper">
    <position-info />
  </div>
  <TimeHead v-if="We_showTimeHead" :enable-day-night-change="true" />
  <div v-show="true" class="tool-box">
    <div v-if="viewModel_GridColorAndValueRamp" class="legend-box">
      <color-card
        :show-step="true"
        :show-slider="We_enableSlide"
        :value-and-color-ramp="viewModel_GridColorAndValueRamp"
        :show-edit="We_enableEdit"
        @on-slide="onGridLayerFilter"
        @on-color-change="onGridLayerColorChange"
      />
    </div>
    <div v-if="viewModel_WindColorAndValueRamp" class="legend-box">
      <color-card
        :show-step="true"
        :show-slider="We_enableSlide"
        :value-and-color-ramp="viewModel_WindColorAndValueRamp"
        :show-edit="We_enableEdit"
        @on-slide="onWindLayerFilter"
        @on-color-change="onWindLayerColorChange"
      />
    </div>
    <div v-if="viewModel_VolumeColorAndValueRamp" class="legend-box">
      <color-card
        :show-step="true"
        :show-slider="true"
        :value-and-color-ramp="viewModel_VolumeColorAndValueRamp"
        :show-edit="We_enableEdit"
        @on-slide="onVolumeLayerFilter"
        @on-color-change="onVolumeLayerColorChange"
      />
    </div>
    <div v-if="viewModel_IsoSurfaceColorAndValueRamp" class="legend-box">
      <color-card
        :show-step="true"
        :show-slider="false"
        :value-and-color-ramp="viewModel_IsoSurfaceColorAndValueRamp"
        :show-edit="We_enableEdit"
      />
    </div>
  </div>
</template>

<style scoped>
.cesium-map {
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.dat-gui {
  position: absolute;
  top: 0px;
  left: 15px;
  z-index: 9999;
}

.position-info-wrapper {
  position: absolute;
  bottom: 40px;
  left: 170px;
  pointer-events: none;
}

.tool-box {
  position: absolute;
  bottom: 4em;
  right: 20px;
  pointer-events: none;
  z-index: 9999;

  .legend-box {
    font-size: 14px;
    padding: 3px 15px;
    width: 380px;
    pointer-events: none;
    background: var(--we-background-color);
  }
}

.wecharts {
  position: absolute;
  right: 440px;
  bottom: 30px;
  width: 600px;
  height: 300px;
  pointer-events: none;
}
</style>
